/* 基础样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a2a6c 0%, #2a5298 100%);
  padding: 40rpx 40rpx;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* 顶部标题区域 */
.header {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
  z-index: 1;
}

.title-container {
  flex: 1;
  text-align: center;
}

.subtitle {
  font-size: 32rpx;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
  display: block;
  margin-top: 20rpx;
}

/* 分类布局 - 核心优化区域 */
.category-layout {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-bottom: 50rpx;
  z-index: 1;
  gap: 30rpx;
}

.category-row {
  display: flex;
  justify-content: center;
  gap: 20rpx;
}

/* 真题分组标题 */
.category-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10rpx 0;
}

.divider-line {
  flex: 1;
  height: 1rpx;
  background: rgba(255, 255, 255, 0.3);
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.divider-text {
  color: rgba(255,255,255,0.9);
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  padding: 0 20rpx;
}

/* 球型样式 - 统一高度 */
.ball {
  border-radius: 20rpx; // 稍微减小圆角，更现代
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.12); // 优化阴影效果
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); // 更流畅的动画
  position: relative;
  overflow: hidden;
  height: 180rpx; /* 固定层高 */
}

.ball-hover {
  transform: translateY(-4rpx); // 改为上移效果，更符合直觉
  box-shadow: 0 12rpx 24rpx rgba(0,0,0,0.16);
}

.ball::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  // width: 200%;
  // height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: rotate(45deg);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.ball:active::before {
  opacity: 0.9;
}

/* 内容区域 */
.ball-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 15rpx;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.category-name {
  color: white;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
}

.category-desc {
  color: rgba(255,255,255,0.9);
  font-size: 24rpx;
  text-align: center;
  font-weight: 300;
}

/* 不同分类的颜色 */
.ball-0 { 
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  flex: 1; /* 等分宽度 */
}
.ball-1 { 
  background: linear-gradient(135deg, #e7e9e9 0%, #34362f 100%);
  flex: 1;
}
.ball-2 { 
  background: linear-gradient(135deg, #ff5e62 0%, #ff9966 100%);
  flex: 1;
}
.ball-3 { 
  background: linear-gradient(135deg, #654ea3 0%, #da98b4 100%);
  flex: 1;
}
.ball-4 { 
  background: linear-gradient(135deg, #e7e9e9 0%, #34362f 100%);
  flex: 1;
}
.ball-5 { 
  background: linear-gradient(135deg, #ff8c00 0%, #ffd700 100%);
  flex: 1;
}

/* 第三层样式调整 */
.category-row:nth-child(4) .ball {
  width: 100%; /* 第三层占满整行 */
}

/* 统计卡片 */
.stats-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50rpx;
  width: 100%;
  z-index: 1;
}

.stat-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 25rpx;
  flex: 1;
  margin: 0 10rpx;
  text-align: center;
  box-shadow: 0 5rpx 15rpx rgba(0,0,0,0.1);
  border: 1rpx solid rgba(255,255,255,0.1);
}

.stat-value {
  display: block;
  font-size: 36rpx; // 稍微增大字体
  font-weight: 600; // 稍微加粗
  color: #1890FF; // 使用主色
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255,255,255,0.7);
}

/* 底部信息 */
.footer {
  text-align: center;
  padding: 30rpx 0;
  color: rgba(255,255,255,0.6);
  font-size: 24rpx;
  border-top: 1rpx solid rgba(255,255,255,0.1);
  z-index: 1;
  margin-top: auto;
}

/* 响应式调整 */
// @media (max-width: 600rpx) {
//   .category-row {
//     height: 200rpx; /* 小屏幕略微降低高度 */
//     gap: 20rpx;
//   }
//   
//   .category-name {
//     font-size: 32rpx;
//   }
//   
//   .category-desc {
//     font-size: 22rpx;
//   }
// }